<script setup lang="ts" >
import { ArrowRight } from '@element-plus/icons-vue'
import SvgIcon from './SvgIcon.vue'
const props = defineProps(['item', 'iconName'])
</script>

<template>
  <div class="breadCrumb">
    <SvgIcon 
    :icon-name="props.iconName.name"
     class="bread-crumb-icon">
    </SvgIcon>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/home' }">{{ props.item.first }}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="props.item.second">{{ props.item.second }}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="props.item.thirdly">{{ props.item.thirdly }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<style scoped lang="scss">
.breadCrumb {
  width: 100%;
  height: 30px;
  // background-color: rgb(196, 174, 217);
  padding: 0 20px;
  display: flex;
  align-items: center;
  background-color: rgb(199, 188, 199);

  .bread-crumb-icon {
    margin-left: 15px;
    margin-right: 5px;
    cursor: pointer;

  }
}

:deep(.el-breadcrumb__item) {
  height: 30px;
  line-height: 30px;
  font-size: 16px;

}

// 进入
:deep(.el-breadcrumb__inner:hover) {

  background-image: -webkit-linear-gradient(bottom, #543278, #fd8403, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
}

//离开颜色
:deep(.el-breadcrumb__inner.is-link:hover) {
  color: rgb(119, 117, 117);
  cursor: pointer;
}
</style>
